<template>
  <div class="template2" style="padding: 60px 0px 0px 0px;">
    <el-container>
      <div class="head" id="head1">
        <div class="tit">职位管理
            <span class="add" @click="addJob('add')">添加职位</span>
        </div>
      </div>
      <el-main style="100%">
            <el-table :data="gridData" border :height="height" size="mini">
                <el-table-column property="name" label="职位名称"></el-table-column>
                <el-table-column property="address" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="addJob(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
      </el-main>
    </el-container>
    <addJob></addJob>
  </div>
</template>
<script> 
import addJob from "./addJob.vue"; //添加编辑职位
import { request } from "../../assets/request.js";
export default {
  data() {
    return {
      height: window.innerHeight - 163,//计算表格高度
      formInline: {
        user: "",
        region: "",
        entryTime:''
      },
      gridData: [],
    };
  },
  created() {
    this.selectList()
    this.$root.$on('jobList',data=>{
      this.selectList()
    })
  },
  methods: {
    del(row) {
      let that=this
      console.log(row.id)
      request.delAlert({
          name:'删除该职位',
          that,
          fn(obj){
              let url='role/'+row.id+'?greenToken='+request.greenToken
              request.ajaxDel({
                url,
                that,
                fn(res){
                  console.log(res)
                  that.$message(obj)
                  that.selectList();
                }
              })
          }
      })
    },
    addJob(row){
      this.$root.$emit('addJob',row)
    },
    selectList(){ //查找职位列表
      let url = "role";
      let that=this   //解决this指向问题
      request.ajaxGet({
        url,
        that,
        fn(res){
          that.gridData=res.list
        }
      })
    }
  },
  mounted() {
  },
  components:{
    addJob,   //添加编辑职位
  },
};
</script>
<style scoped lang="less">
@import "../template2.less";
</style>